<template>
	<!-- 我的团队 -->
	<view class="container">
		<!-- 我的团队统计 -->
		<view class="header">
			<image src="@/static/images/list_bg@2x.png"></image>
			<view class="header_box">
				<view class="total_title">团队总人数<text class="total_yuan">(人)</text></view>
				<view class="total_number">{{total_num}}</view>
				<view class="header_content">
					<view class="details_box">
						<view class="box_title">
							合伙人
						</view>
						<view class="box_number">
							{{partner_num}}
						</view>
					</view>
					<!-- 中间割线 -->
					<view class="details_border"></view>
					<view class="details_box">
						<view class="box_title">
							城市合伙人
						</view>
						<view class="box_number">
							{{city_partner_num}}
						</view>
					</view>
					<view class="details_border"></view>
					<view class="details_box">
						<view class="box_title">
							达人
						</view>
						<view class="box_number">
							{{expert_num}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="content">
			<view class="team">
				<view class="team_content" v-for="(item, index) in teamData" :key="index">
					<view class="team_header">
						<view class="header_user">
							<view class="header_avatar">
								<image :src="item.avatar"></image>
							</view>
							<view class="title_box">
								<view class="nickName">
									{{item.nickname}}
								</view>
								<view class="level">
									{{item.partner_level_name?item.partner_level_name:'普通会员'}}
								</view>
							</view>
						</view>
						<view class="header_info">
							<view class="header_number" @tap="playtel(item.mobile)">
								<u-icon name="phone"></u-icon>
								<view class="mobile">
									{{item.mobile?item.mobile:'暂未绑定'}}
								</view>
							</view>
							<view class="info_box">
								<view class="info_text">
									合伙人:<text class="text_red">{{item.partner_num}}人</text>
								</view>
								<view class="info_text">
									城市合伙人:<text class="text_red">{{item.city_partner_num}}人</text>
								</view>
							</view>
						</view>

					</view>
				</view>
			</view>
			<loading-footer :status="loadingStatus" slotEmpty>
				<view class="data-null column-center" slot="empty">
					<image class="img-null" src="/static/images/order_null.png" />
					<text class="nr muted">暂无记录～</text>
				</view>
			</loading-footer>
		</view>
	</view>
</template>

<script>
	import {
		myTeamList,
	} from '@/api/common.js'
	import {
		loadingType
	} from "@/utils/type";
	import {
		loadingFun
	} from "@/utils/tools"
	export default {
		data() {
			return {
				total_num: 0,
				partner_num: 0,
				city_partner_num: 0,
				expert_num: 0,
				teamData: [],
				page: 1,
				loadingStatus: loadingType.LOADING
			}
		},
		onLoad() {
			this.getUserTeamMember()
		},
		onReachBottom() {
			this.getUserTeamMember()
		},
		methods: {
			playtel: function(mobile) {
				uni.makePhoneCall({
					phoneNumber: mobile
				});
			},
			getUserTeamMember() {
				let {
					teamData,
					loadingStatus,
					page
				} = this;
				loadingFun(myTeamList, page, teamData, loadingStatus).then(res => {
					if (res) {
						this.page = res.page;
						this.teamData = res.dataList;
						this.loadingStatus = res.status;
						this.total_num = res.resData.total_num;
						this.partner_num = res.resData.partner_num;
						this.city_partner_num = res.resData.city_partner_num;
						this.expert_num = res.resData.expert_num;
					}
				})
			},
		}
	}
</script>

<style scoped>
	.header {
		position: relative;
		width: 100%;
		height: 480rpx;
	}

	.header image {
		width: 100%;
		height: 100%;
	}

	.header_box {
		position: absolute;
		top: 0;
		width: 100%;
		height: 100%;
		padding: 30rpx 0;
	}

	.total_title {
		height: 54rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		text-align: center;
		color: #FFFFFF;
		line-height: 54rpx;
	}

	.total_yuan {
		height: 54rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		text-align: center;
		color: #FFFFFF;
		line-height: 54rpx;
	}

	.total_number {
		height: 54rpx;
		font-size: 48rpx;
		font-family: PingFang SC;
		font-weight: bold;
		text-align: center;
		color: #FFFFFF;
		line-height: 54rpx;
	}

	.header_content {
		margin-top: 50rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.details_box {
		width: 30%;
	}

	.box_title {
		height: 54rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		text-align: center;
		color: #FFFFFF;
		line-height: 54rpx;
	}

	.box_number {
		height: 54rpx;
		font-size: 40rpx;
		font-family: PingFang SC;
		font-weight: bold;
		text-align: center;
		color: #FFFFFF;
		line-height: 54rpx;
	}

	.details_border {
		width: 2rpx;
		height: 54rpx;
		background-color: #D59C63;
	}

	.content {
		position: relative;
		top: -120rpx;
		width: 95%;
		margin: 0 auto;
	}

	.team {
		width: 100%;
	}
	
	.data-null{
		margin-top: 100rpx;
	}
	.team_content {
		margin-bottom: 20rpx;
		padding: 20rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
	}
	/* 团队列表头部区域 */
	.team_header {
		margin-bottom: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.header_user {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.header_avatar {
		width: 84rpx;
		height: 84rpx;
	}

	.header_avatar image {
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}

	.title_box {
		margin-left: 20rpx;
	}

	.nickName {
		width: 180rpx;
		height: 48rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #1D1F24;
		line-height: 48rpx;
		overflow:hidden; 
		text-overflow:ellipsis; 
		white-space:nowrap;
	}

	.level {
		margin-left: 10rpx;
		margin-top: 10rpx;
		width: 150rpx;
		padding: 0 10rpx;
		height: 30rpx;
		border: 1rpx solid #EA4445;
		text-align: center;
		font-size: 24rpx;
		color: #EA4445;
		line-height: 30rpx;
		border-radius: 28rpx;
	}
	.user-level {
		margin-left: 10rpx;
		margin-top: 10rpx;
		width: 150rpx;
		padding: 0 10rpx;
		height: 30rpx;
		border: 1rpx solid #EA4445;
		text-align: center;
		font-size: 24rpx;
		color: #EA4445;
		line-height: 30rpx;
		border-radius: 28rpx;
	}
	.header_info{
		margin-left: 20rpx;
	}
	.header_number {
		display: flex;
		justify-content: flex-end;
	}

	.mobile {
		margin-left: 10rpx;
		height: 54rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		text-align: right;
		color: #393F47;
		line-height: 54rpx;
	}
	.info_box{
		display: flex;
		justify-content: space-between;
	}
	.info_text{
		margin-left:20rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #808080;
		line-height: 48rpx;
	}
	.text_red{
		margin-left:20rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #EA4445;
		line-height: 48rpx;
	}
</style>